<template>
  <div class="main">
    <mt-header fixed title="宠物圈" style="background:#f49b00">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
    </mt-header>
    <div style="height:40px;"></div>

    <van-search
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <div class="body1"  v-for="item  in text" :key="item.dynamic_id" @click="goto(item.dynamic_id)">
      <img :src="`${item.pic}`" alt="">
      <div class="body1-1">
        <b>{{item.title}}</b>
        <p>{{item.content}}</p>
      </div>
    </div>

    <div style="height:47px;"></div>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: []
      }
    },
    mounted() {
      // 发送请求，加载宠物列表
      this.axios.get("/cwquan").then((res) => {
        console.log(res);
        this.text = res.data.results;
      });
    },
    methods: {
      goto(id) {
        this.$router.push(`/text/details?did=${id}`)
      }
    },
  }
</script>

<style lang="scss" scoped>
.main{
  background-color: #fbf7f7;
}
.body1{
  display: flex;
  margin: 5px 10px 10px;
  border-radius: 5px;
  background-color: white;
  // box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.05);
  height: 20vh;
  
}
.body1 img{
  width: 30%;
  margin: 10px;
}
.body1-1{
  margin: 10px 10px 0;
  p{
    font-size: 15px;
    color: #494747;
    margin-top: 8px;
    // 多行显示省略号
    overflow: hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-all;
  }
}

::v-deep .mint-header-title{
  font-size: 15px;
}
</style>